<template>
    <div class="h">
<!--        <div class="bor">-->
<!--            <div class="title-btn">-->
<!--                <a  @click="hanBoth()" id="b" class="d">全站</a>-->
<!--                <a  @click="hanHVideo()" id="v" target="_blank" class="d">视频</a>-->
<!--                <a  @click="hanScience()"  class="d">科学</a>-->
<!--                <a @click="hanDigit()" class="d">数码</a>-->
<!--                <a @click="hanSports()" class="d">体育</a>-->
<!--                <a @click="hanFash()" class="d">时尚</a>-->
<!--                <a @click="hanCar()" class="d">汽车</a>-->

<!--            </div>-->
<!--            </div>-->

<!--        <div class="title-btn">-->
<!--            　<a v-for="item in hotData">{{item.name}}</a>-->
<!--        </div>-->



        <el-menu    class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item   :default-active="activeIndex"  v-for="(item,i) in hotData" :index="i+''" @click="$router.replace({ path: item.path })">{{item.name}}</el-menu-item>
        </el-menu>



        <div>
            <router-view></router-view>
<!--            <Both></Both>-->
<!--            <Car></Car>-->
        </div>


    </div>
</template>

<script>
    // import Both from "./components/Both";
    export default {
        name: "Hot",

       data(){
         return{
             hotData: [
                 { name: '全站', path: '/hot/Both' },
                 { name: '视频', path: '/hot/HVideo' },
                 { name: '科学', path: '/hot/Science' },
                 { name: '数码', path: '/hot/Digit' },
                 { name: '体育', path: '/hot/Sports' },
                 { name: '时尚', path: '/hot/Fashion' },
                 { name: '汽车', path: '/hot/Car' },
             ],
             // hotstyle:{
             //     backgroundColor:"rgba(0,132,255,.1)",
             //     color: "#0084ff",
             //
             // },

             activeIndex: '1',
             activeIndex2: '2'
         }
       },
        methods:{

            handleSelect(key, keyPath) {
                console.log(key, keyPath);

            },
        //
        //
        //     handleSelect(i){
        //         var b=document.getElementById("i");
        //         b.style.backgroundColor="rgba(0,132,255,.1)"
        //         b.style.color="#0084ff"
        //         // document.getElementsByClassName("d").style="none"
        //         document.getElementById("i").style.color="#121212"
        //         // document.getElementById('').className = '';
        //
        //         for(var i=0;i<d.length;i++){
        //             console.log('555')
        //
        //             d[i].className='';
        //
        //         };
        //
        //         b.className='active';
        //
        //
        //     },
        //     hanHVideo() {
        //         this.$router.replace({name: 'HVideo'})
        //         document.getElementById("v").style.color = "#0084ff"
        //         // document.getElementById("b").style.color="#121212"
        //         // document.getElementById("b").style.backgroundColor="#f6f6f6"
        //     },
        //     hanScience(){
        //         this.$router.replace({name:'Science'})
        //     },
        //     hanDigit(){
        //         this.$router.replace({name:'Digit'})
        //     },
        //     hanSports(){
        //         this.$router.replace({name:'Sports'})
        //     },
        //     hanFash(){
        //         this.$router.replace({name:'Fashion'})
        //     },
        //     hanCar(){
        //         this.$router.replace({name:'Car'})
        //     }
        // },
        // components:{
        //     // Both,
        }
    }
</script>

<style scoped>

    hotstyle{
        /*padding: 20px;*/
        background-color: #b8e5f8;
        color: #0084ff;


    }
    .title-btn{

        border: solid #ebebeb;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 12px 16px;
        outline: none;
        border-bottom: rgba(133,144,166,.12) 1px solid;
    }
    .title-btn a{
        display: inline;
        text-decoration: none;
        color: -webkit-link;
        cursor: pointer;
        /*text-decoration: underline;*/

        flex-shrink: 0;
        margin: 4px;
        height: 30px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 5px 20px;
        border-radius: 2px;
        font-size: 14px;
        line-height: 20px;
        color: #646464;
        background-color: #f6f6f6;

    }

</style>